[Adobe Edge Inspect]モバイル向けウェブサイト/ウェブアプリを実機でデバッグ

モバイルサイトやモバイル向けウェブアプリを開発している方はデバイスでの動作検証等が面倒に感じたことがあるかと思います。 テストサーバーに修正したファイルを何度もアップするのは面倒ですし、実機でデバッグできないのは不自由です。 そういった面倒や不具合を解消し、デバイスでのブラウジングやデバッグを簡単に行うことができる「Adobe Edge Inspect」の機能を紹介したいと思います。

今回使用する環境

今回は下記の環境で検証しています。

MacBook Air（ MacOS X 10.7.4） iPhone4（iOS 6.0.1）

インストールまでの流れ

1.サイトにアクセスしてGet startedボタンを選択します。 http://html.adobe.com/edge/inspect/ 2.サインインします。（Adobe IDを持っていない場合は作成します） 3.画面上部の「アプリケーション」メニューを選択します。 4.画面中ほどのEdge Inspect「詳細情報」を選択します。 5.Edge Inspectをダウンロードします。 6.ChromeウェブストアでAdobe Edge InspectをChromeに追加します。 7.iPhoneからApp StoreでAdobe Edge Inspectをインストールします。

※無償メンバーシップで利用できます。（執筆時） ※無償メンバーシップの場合は利用できる機能が制限され、接続できるデバイスは1台のみとなります。 ※サブスクリプションを購入することで同時接続できるデバイスの台数に制限がなくなります。

セットアップの流れ

macにダウンロードしたEdge Inspectをインストールして起動します。 macとiPhoneは同一のネットワークに接続されている必要があります。 1.iPhoneでEdge Inspectアプリを起動します。 2.認識されているデバイスをタップします。（自動検出/ 画面右上の+ボタンで手動指定も可） 3.パスコードが表示されます。 4.ChromeのEdge Inspect拡張機能を開いてパスコードを入力します。

ブラウジング

Chromeで開いているページがiPhoneのsafariに表示されます。 Chromeでページ遷移した際に自動的にsafariも連動して遷移します。 多少ラグが生じますが、気になる長さではありませんし、快適にブラウジングできます。 localhostでのブラウジングもサポートされています。

デバッグ

Edge Inspectにはデバッグ機能が搭載されています。 1.デバイス名の右横に表示されている<>アイコンをクリックします。 2.デバッグパネルが開きます。Chromeの開発ツールとアイコンが同じで基本的な機能もほとんど同様のようですので、既に慣れている方は使い方に迷うことはなさそうです。 3.Elementsタブを選択してみます。 4.CSSを試しに変更してみましょう。（文字の色を赤に変更しました） 5.変更された内容がすぐに反映されます。

その他の機能

1.Edge Inspectのヘッダのナビゲーション部分が非表示になり、閲覧しているページがフルスクリーン表示されます。 2.スクリーンキャプチャを行います。 3.スクリーンキャプチャされた画像が保存されているフォルダを開きます。macの場合は書類フォルダに「Edge Inspect」フォルダが作成されて保存されています。

まとめ・感想

全体的に操作の流れが単純さに落とし込まれており、簡単に利用することができます。 レスポンシブデザインの挙動を確認したいときなどにも便利ですし、実機特有のフォントの具合などの確認や、Retinaディスプレイで閲覧した際の見た目などを確認したいときにも簡単にチェックできるのでとても便利だと感じました。 懸念点としては、セキュリティ等の都合によってデバイスをPCと同一のネットワークに接続できない環境だと利用ができない、などがあるかと思います。 （PCが基幹ネットワークのみに接続を許可され、モバイルが許可されていない場合 等）